<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/css/bootstrap.min.css"
      integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"
      crossorigin="anonymous"
    />
    <style>
      html,
      body {
        width: 100vw;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <form action="" class="needs-validation" novalidate>
        <div class="form-row">
          <label for="MyValidation01">姓名</label>
          <input
            type="text"
            name="username"
            id="MyValidation01"
            class="form-control"
            required
          />
          <div class="valid-feedback">验证通过</div>
          <div class="invalid-feedback">请重试</div>
        </div>
        <div class="form-row">
          <label for="MyValidation02">电话</label>
          <input
            type="text"
            name="tel"
            id="MyValidation02"
            class="form-control"
            required
          />
          <div class="valid-feedback">验证通过</div>
          <div class="invalid-feedback">请重试</div>
        </div>
        <br />
        <button type="submit" class="btn btn-primary">提交</button>
      </form>
    </div>

    <script
      src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"
      integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
      integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/js/bootstrap.min.js"
      integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"
      crossorigin="anonymous"
    ></script>

    <script>
      ;(function () {
        'use strict'
        window.addEventListener(
          'load',
          function () {
            // Fetch all the forms we want to apply custom Bootstrap validation styles to
            var forms = document.getElementsByClassName('needs-validation')
            // Loop over them and prevent submission
            var validation = Array.prototype.filter.call(forms, function (
              form
            ) {
              form.addEventListener(
                'submit',
                function (event) {
                  if (form.checkValidity() === false) {
                    event.preventDefault()
                    event.stopPropagation()
                  }
                  form.classList.add('was-validated')
                },
                false
              )
            })
          },
          false
        )
      })()
    </script>
  </body>
</html>
